<template>
  <div class="order_details">
    <p class="header">
      <el-button
        size="small"
        @click="goback"
        style="position: absolute; left: 0"
      >
        <el-icon> <ArrowLeft /> </el-icon>返回
      </el-button>
      <span>统筹单在线查验</span>
    </p>
    <div class="content" v-if="details">
      <div class="info_item">
        <p class="info_label">基本信息</p>
        <ul class="info_content">
          <li>
            <span>统筹单号：</span>
            <span>{{ details.orderInfo.order }}</span>
          </li>
          <li>
            <span>统筹期间：</span>
            <span
              >{{ details.items.item_48 }}至{{ details.items.item_49 }}</span
            >
          </li>
          <li>
            <span>被统筹人：</span>
            <span>{{ details.items.item_1 }}</span>
          </li>
          <li>
            <span>车牌号：</span>
            <span>{{ details.orderInfo.carNumber }}</span>
          </li>
          <li>
            <span>厂牌型号：</span>
            <span>{{ details.items.item_6 }}</span>
          </li>
          <li>
            <span>发动机号：</span>
            <span>{{ details.items.item_8 }}</span>
          </li>
          <li>
            <span>车架号：</span>
            <span>{{ details.items.item_7 }}</span>
          </li>
        </ul>
      </div>
      <div class="info_item">
        <p class="info_label">统筹项目与统筹限额</p>
        <ul class="info_table">
          <li>
            <span>统筹项目</span>
            <span>统筹限额(元)</span>
          </li>
          <li>
            <span>机动车损失统筹</span>
            <span>{{ details.orderInfo.itemsSum_1 }}</span>
          </li>
          <li>
            <span>第三者责任统筹</span>
            <span>{{ details.orderInfo.itemsSum_2 }}</span>
          </li>
          <li>
            <span>车上人员责任统筹(驾驶员)</span>
            <span>{{ details.orderInfo.itemsSum_3 }}</span>
          </li>
          <li>
            <span>车上人员责任统筹(乘客)</span>
            <span>{{ details.orderInfo.itemsSum_4 }}</span>
          </li>
          <li>
            <span>医保外用药责任统筹</span>
            <span>{{ details.orderInfo.itemsSum_5 }}</span>
          </li>
        </ul>
      </div>
      <!-- <div class="pay_block" v-if="details.orderInfo.payStatus == -1">
        <el-button style="width: 100%" size="large" type="primary"
          ><img
            class="alipay_icon"
            src="/ali.png"
            alt=""
            srcset=""
          />支付宝支付</el-button
        >
        <el-button style="width: 100%" size="large" type="success"
          ><img
            class="wechat_icon"
            src="/wechat.png"
            alt=""
            srcset=""
          />微信支付</el-button
        >
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import axios from "@/request";

const route = useRoute();
const details = ref();
const goback = () => {
  window.history.back();
};
// 查询
const handleQueryDetails = (id) => {
  axios
    .get(`/api/contract/${id}`)
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        if (data) {
          details.value = data;
        }
      }
    })
    .catch((err) => {});
};
let id = route.query.id;
handleQueryDetails(id);
onMounted(() => {
  document.title = "统筹单查验";
});
</script>

<style scoped>
.order_details .header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e6e6e6;
  line-height: 40px;
  font-weight: bold;
}

.order_details .content {
  margin: 5px 0;
}

.info_label {
  line-height: 30px;
  background-color: #999;
  color: #fff;
}

.info_content {
  padding: 10px 30px;
}

.order_details ul li {
  list-style: none;
  padding: 10px 0;
  color: #666;
  font-size: 13px;
}

.info_content li span:first-child {
  display: inline-block;
  width: 70px;
  text-align: right;
}

.info_table {
  padding: 10px 30px;
}

.info_table li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pay_block {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.pay_block .el-button {
  margin: 0;
  margin-bottom: 20px;
}
.alipay_icon {
  width: 20px;
}
.wechat_icon {
  width: 20px;
}
</style>